<template>
  <div>
    <p>父级组件</p>
    <div>
      <button @click="changeMsg">更改数据</button>
      <button @click="getChildByRef">使用$children和$refs</button>
    </div>
    <div>父组件传递给子组件数据：{{ fromchildData }}</div>
    <child1 ref="child1" :msg="msg" v-model="fromchildData" :msg1="msg1" :msg2="msg2" :msg3="msg3" :msg4="msg4" @childData="childData"></child1>
  </div>
</template>
<script>
import child1 from './child1.vue';
export default {
  data() {
    return {
      msg: '父组件默认值',
      msg1: 'parent数据1',
      msg2: 'parent数据2',
      msg3: 'parent数据3',
      msg4: 'parent数据4',
      fromchildData: ''
    };
  },
  components: {
    child1
  },
  methods: {
    // 点击按钮更改数据
    changeMsg() {
      this.msg = '父组件主动改变值';
    },
    // 子组件的回调方法
    childData(data) {
      this.fromchildData = data;
    },
    // 使用$chilren和$refs获取子组件
    getChildByRef() {
      console.log('使用$children', this.$children);
      console.log('使用$refs', this.$refs.child1);
    }
  }
};
</script>
